<template>
  <div>
    <!-- 全部商品页面 -->
    <div class="box">
      <div class="head">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            :to="{ path: '/' }"
            class="el-breadcrumb__inner is-link"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>全部商品</el-breadcrumb-item>
          <el-breadcrumb-item>分类</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="bottom">
          <p class="h3">分类</p>
          <div class="all">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane
                v-for="item in cateList"
                :key="item.category_id"
                :label="item.category_name"
                :name="'' + item.category_id"
                @tab-click="tabchge(item.category_id)"
              >
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- 身体 -->
      <div class="body">
        <!-- 全局注册过的小盒子 -->
        <mList :shopList="allshopList" :More="true"></mList>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import allshop from "../API/allshop";
export default {
  name: "",
  data() {
    return {
      activeName: "-1",
      categoryID: [1],
      currentPage: 1,
      pageSize: 15,
      allshopList: [],
      cateList: [], //存放分类的列表
      search: "", //搜索框双向绑定的值
      total: 0, //数据总条数
    };
  },
  props: [], //接收父组件传过来的值
  components: {},
  created(){
    this.getMore();
    // this.getAll();
    this.getCate();
    /* this.getProductBySearch(); */
  },
  activated() {
    let query = this.$route.query;
    if (!Object.keys(query).length) {
      this.activeName = "0";
    } else {
      if (query.search) {
        this.search = query.search;
        this.getProductBySearch();
      }
      this.activeName = "-1";
    }
  },

  methods: {
    //获取所有分类信息
    //   product/getCategory
    async getCate() {
      const { data: res } = await allshop.getCate();
      console.log(res);
      this.cateList = res.category;
      console.log(this.cateList);
      this.cateList.unshift({
        category_id: 0,
        category_name: "全部",
      }); //添加全部到最前面
      console.log(this.cateList.length);
    },

    //获取所有商品信息
    //   product/getAllProduct
    async getAll() {
      let sendDate = {
        categoryID: this.categoryID,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      const { data: res } = await allshop.getAll(sendDate);
      console.log(res);
      this.allshopList = res.Product;
      this.total = res.total;
    },
    //获取某一类商品信息
    async getProduct() {
      let sendDate = {
        categoryID: this.categoryID,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      const { data: res } = await allshop.getProduct(sendDate);
      console.log(res);
      this.allshopList = res.Product;
      this.total = res.total;
    },
    // 页码变化调用currentChange方法
    currentChange(currentPage) {
      this.currentPage = currentPage;
    },
    async getProductBySearch() {
      let sendData = {
        search: this.search,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      let { data: res } = await allshop.getProductBySearch(sendData);
      this.allshopList = res.Product;
      this.total = res.total;
    },
    /* 加载更多 */
    async getMore() {
      this.categoryID = this.$route.query;
      let arr = [];
      for (var i in this.categoryID) {
        // console.log(this.categoryID[i])
        arr.push(this.categoryID[i]);
      }
      let allList = {
        categoryID: arr,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
   /*    console.log(sendDate); */
      const { data: res } = await allshop.getProductMore(allList);
      console.log(res);
      this.allshopList = res.Product;
      this.total = res.total;
    },
  },
  watch: {
    activeName(val) {
      console.log("监听", val);
      //每次切换分类都要重置分页数据/搜索数据
      this.currentPage = 1;
      this.total = 0;
      let categoryID = Number(val);
      this.categoryID = [categoryID];
      console.log(this.categoryID);
      if (categoryID === 0) {
        this.categoryID = [];
        this.getAll();
        return;
      } else {
        //   this.currentPage = 1
        this.getProduct();
      }
    },
    currentPage(currentPage) {
      this.currentPage = currentPage;
      //如果搜索存在 则证明是搜索的分页
      if (this.search) {
        this.getProductBySearch();
      } else {
        // this.getProduct()
        this.getAll();
      }
      //   this.getAll();
    },
    //监听路由改变
    $route(value) {
      console.log(value);
      if (value.query.search) {
        console.log(111);
        this.search = value.query.search;
        this.currentPage = 1;
        this.total = 0;
        this.activeName = "-1";
        this.getProductBySearch();
        return;
      }
     /*  console.log(value.query);
      this.categoryID = value.query.categoryID;
      console.log(categoryID); */
     /*  this.getAll(); */
    },
  },
  computed: {},
};
</script>

<style lang='scss' scoped>
div {
  width: 100%;
  background: #eeee;
  .main {
    width: 1265px;
    min-height: 1448px;
    /* background: white; */
    margin: 0 auto;
    .body {
      width: 100%;
      .pagination {
        height: 50px;
        text-align: center;
      }
      .none-product {
        color: #333;
        margin-left: 13.7px;
      }
    }
  }
  .box {
    width: 100%;
    background: white;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    .head {
      width: 1265px;
      margin: 0 auto;
      background: white;
      height: 100px;
      .el-breadcrumb {
        width: 1265px;
        background: white;
        font-size: 18px;
        padding-top: 20px;
        transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        color: #303133;
        line-height: 26px;
        padding-bottom: 5px;
        .el-breadcrumb-item {
          font-size: 16px;
        }
      }
      .bottom {
        width: 100%;
        display: flex;
        background: white;
        .h3 {
          font-size: 20px;
          font-weight: 550;
          width: 60px;
          height: 37px;
          border-bottom: 1px solid rgb(204, 193, 193);
          border-right: 1px solid rgb(204, 193, 193);
          padding-bottom: 7px;
          text-align: center;
          padding-top: 4px;
        }
        .all {
          display: flex;
          width: 56%;
          height: 42px;
          justify-content: space-around;
          align-items: center;
          background: white;
          margin-top: 7px;
          .el-tabs {
            width: 100%;
            height: 100%;
            border: 0.5px solid #ddd;
            line-height: 40px;
            text-align: center;
            background: white;
          }
        }
      }
    }

    /*  .pagetion{
        width: 100%;
        margin: 0 auto;
        text-align: center;
    .el-pagination{
        width: 1110px;

    }
    } */
  }
}
</style>